<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>供应商报价明细</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="onFormSubmit">提交评审</el-button>
                </div>
            </div>
            <table class="custom-table" style="margin-bottom:10px;">
                <tr><td class="tr-title">项目名称</td><td>{{row.name}}</td></tr>
            </table>
            <el-table :data="tableData" style="width: 100%;" class="radioClass" stripe>
                <el-table-column prop="supplierName" label="供应商名称" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="priceDetails(scope.row)">{{scope.row.supplierName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="flag" label="是否中标" width="180">
                    <template slot-scope="scope">
                        <el-radio v-model="radioId" @change.native="getCurrentRow(scope.row)" :label="scope.$index">&nbsp;</el-radio>
                    </template>
                    <!-- <template slot-scope="scope">
                        
                        <template v-if="scope.row.flag">
                            <el-tag type="success">已中标</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="warning">未中标</el-tag>
                        </template>
                    </template> -->
                </el-table-column>
                <el-table-column prop="quoteAmount" label="报价（元）" width="100"></el-table-column>
                <el-table-column prop="quoteOrderFile" label="报价单" width="100">
                    <template slot-scope="scope">
                        <template v-if="scope.row.quoteOrderFile">
                            <el-button type="text" size="mini" @click="fileDownload(scope.row,1)">下载</el-button>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="qualification" label="资质" width="100">
                    <template slot-scope="scope">
                        <template v-if="scope.row.qualification">
                            <el-button type="text" size="mini" @click="fileDownload(scope.row,2)">下载</el-button>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="skuInfo" label="备注">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top"
                            width="200"
                            trigger="click"
                            :content="scope.row.skuInfo">
                            <el-button type="text" slot="reference">{{scope.row.skuInfo | ellipsis}}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <table class="custom-table" style="margin-top:10px;">
                <tr><td class="tr-title">说明</td><td>
                    <el-input type="textarea" v-model="explain"/>
                </td></tr>
            </table>
        </el-card>
        <el-dialog title="物资信息" :visible.sync="visible" width="700" append-to-body :close-on-click-modal="false">
            <el-table :data="quoteDetail" stripe>
                <el-table-column prop="name" label="物资名称"></el-table-column>
                <el-table-column prop="code" label="物资编号"></el-table-column>
                <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="unitPrice" label="单价（元）"></el-table-column>
                <el-table-column prop="totalPrice" label="总价（元）"></el-table-column>
            </el-table>
        </el-dialog>
        
    </div>
</template>

<script>
    import { 
        bidPurchaseSupplierQuote,
        bidPurchaseInquiryInvitationEnrollDetails,
        bidPurchaseInquiryInvitationSetWinSupplier,
        bidPurchaseInquiryInvitationCancel,
        bidPurchaseOvert
    } from "@/api/purchase_api"
    export default {
        props: ['row'],
        data() {
            return {
                explain:"",//说明
                tableData:[],
                quoteDetail:[],
                visible:false,
                radioId:'',
                winningSupplierId:''
            };
        },
        filters: {
            ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            }
        },
        mounted(){
            this.getSupplierDetails(this.row.id);
        },
        methods: { 
          
            async getSupplierDetails(id){
               const {code,data} = await bidPurchaseInquiryInvitationEnrollDetails(id);
                if(code === 200){
                    data.forEach(v=>{
                        v.quoteAmount = (v.quoteAmount/100);
                    })
                    this.tableData = data;
                    // 当前供应商id 和 列表供应商id 匹配 选中
                    this.tableData.forEach((v,i)=>{
                        if(this.row.winningSupplierId === v.supplierId){
                            this.radioId = i;
                            this.winningSupplierId = v.supplierId;
                        }
                    })
                }
            },
            //下载
            fileDownload(row,type){
                var form = document.createElement('form');
                if(type===1){
                    if(!row.quoteOrderFile){return;}
                    form.action =  `${process.env.VUE_APP_FILE}${row.quoteOrderFile}`
                }else if(type===2){
                    if(!row.qualification){return;}
                    form.action = `${process.env.VUE_APP_FILE}${row.qualification}`
                }
                form.target = '_blank';
                form.method = 'get';
                document.body.appendChild(form);
                form.submit();
            },
            priceDetails(row){
                if(row.quoteDetail){
                    this.quoteDetail = JSON.parse(row.quoteDetail);
                    this.quoteDetail.forEach(v=>{
                        v.unitPrice = (v.unitPrice/100);
                        v.totalPrice = (v.totalPrice/100);
                    })
                }
                this.visible = true;
            },
            //选中哪个中标
            getCurrentRow(row){
                this.winningSupplierId = row.supplierId;
            },
            //提交报价
            onFormSubmit(){
                if(!this.explain){
                    return this.$message.error('请填写说明');
                }
                this.$confirm("确认提交", "提示", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "通过",
                    cancelButtonText: "流标",
                    type: "warning"
                }).then(async () => {
                    let params = {};
                    params.explain = this.explain;
                    params.id = this.row.id;//标id
                    /* const supplier = this.tableData.find(v=>{return v.flag===true})
                    params.winningSupplierId = supplier.supplierId;//中标供应商id */
                    params.winningSupplierId = this.winningSupplierId;
                    let { code } = await bidPurchaseInquiryInvitationSetWinSupplier(params);
                    if(code === 200){
                        this.$message.success("评审成功");
                        this.bidOvert();//评审通过后 执行一下公示接口 让数据流转到合同里面，
                        this.onClose();
                    }
                }).catch(async (action) => {
                    if(action === 'cancel'){
                        let params = {};
                        params.explain = this.explain;
                        params.id = this.row.id;//标id
                        const { code } = await bidPurchaseInquiryInvitationCancel(params);
                        if(code === 200){
                            this.$message.success("该采购任务已流标");
                            this.onClose();
                        }
                    }
                });
            },
            async bidOvert(){
                //1 公示，0 不公示 2撤回   默认不公示
                await bidPurchaseOvert(this.row.id,0);
            },
            //关闭报价
            onClose(){
                this.$emit('on-cancel-click','review');
            }
        }
    };
    </script>
    